<script lang="ts" setup>

import {SetMeal} from "@/dto/Main/SetMeal.ts";
import {onMounted, ref} from "vue";
import {SetMealApi} from "@/api/Main/SetMealApi.ts";
import ImageView from "@/module/image/ImageView.vue";

let natureSetMealList = ref<Array<SetMeal>>([])
let themeSetMealList = ref<Array<SetMeal>>([])
const api = ref(new SetMealApi())
async function natureInit(){
    let search = new SetMeal()
    search.series = "自然系列"
    let result = await api.value.pageAll(search)
    natureSetMealList.value = result.data?.content ?? []
    if (natureSetMealList.value.length > 4){
        natureSetMealList.value = natureSetMealList.value.splice(0,4);
    }
}

async function themeInit(){
    let search = new SetMeal()
    search.series = "主题系列"
    let result = await api.value.pageAll(search)
    themeSetMealList.value = result.data?.content ?? []
    if (themeSetMealList.value.length > 4){
        themeSetMealList.value = themeSetMealList.value.splice(0,4);
    }
}

onMounted(async ()=>{
    await natureInit()
    await themeInit()
})
</script>

<template>
  <div>
      <el-row>
          <el-col :offset="4" :span="16">
              <div style="text-align: center;margin-top: 50px;">
                  <img src="@/assets/image/1508396825552708.png" width="500">
              </div>
              <el-col style="margin-top: 50px">

                  <el-row>
                      <el-col v-for="set in natureSetMealList" :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img">
                                  <image-view width="270" height="270" v-model="set.img"/>
                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">{{set.title}}</p>
                                      <p style="font-size: 15px;color:#ff0000;">￥{{set.money}}</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">{{set.text}}</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                  </el-row>
              </el-col>

              <div  style="text-align: center;margin-top: 100px;">
                  <img src="@/assets/image/1508397109357961.png" width="500">
              </div>
              <el-col style="margin-top: 50px">
                  <el-row>
                      <el-col v-for="set in themeSetMealList" :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img">
                                  <image-view width="270" height="270" v-model="set.img"/>
                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">{{set.title}}</p>
                                      <p style="font-size: 15px;color:#ff0000;">￥{{set.money}}</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">{{set.text}}</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                  </el-row>
              </el-col>


              <div style="text-align: center;margin-top: 100px;">
                  <img src="@/assets/image/1508397246366082.png" width="500">
              </div>
              <el-col style="margin-top: 50px">
                  <el-row>
                      <el-col :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img-4">

                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">花剪</p>
                                      <p style="font-size: 15px;color:#ff0000;">¥49</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">49元起，多花些时间在美好上</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                      <el-col :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img-5">

                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">花器</p>
                                      <p style="font-size: 15px;color:#ff0000;">￥20</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">20元起，好花配好器</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                      <el-col :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img-6">

                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">夏花手账</p>
                                      <p style="font-size: 15px;color:#ff0000;">￥39</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">39元起，手绘印花本，生如夏花</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                      <el-col :span="5" :offset="1">
                          <el-card>
                              <div class="florust-img-7">

                              </div>
                              <template #footer>
                                  <div style="text-align: center">
                                      <p style="font-size: 18px">精选周边</p>
                                      <p style="font-size: 15px;color:#ff0000;">￥69</p>
                                      <hr width="200" color="e4e4e4">
                                      <p style="font-size: 12px;color:#8c86aa;">69元起，围巾、抱枕、水杯、盘子</p>
                                  </div>
                              </template>
                          </el-card>
                      </el-col>
                  </el-row>
              </el-col>
          </el-col>
      </el-row>
  </div>
</template>

<style scoped>


.el-card {
    border: 0 !important;
    --el-card-border-radius: 0px !important;
    --el-card-padding: 0 !important;
}


.florust-img{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/img.png");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
.florust-img-2{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/1498207959541452.jpg");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
.florust-img-4{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/1497878677255115.png");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
.florust-img-5{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/1497878520601491.png");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
.florust-img-6{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/1497878917801839.png");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
.florust-img-7{
    margin-top: -20px;
    height: 270px;
    line-height: 60px;
    background-image: url("@/assets/image/1497878834428272.png");
    background-size: 100%;
    color: #ddd;
    z-index: -1;
}
</style>